<template>
  <div class="links">
    <h2 align="center" style="margin: 10px 0; color: #24292E;">友情链接</h2>
    <div class="link-list">
      <div class="link-list-item" 
        v-for="(item, index) in allowedLinkList"
        :key="item.link + '-' + index"
      >
        <a :href="item.url" target="_blank">
          <img :src="item.picture"  class="img_rotate">
          <span class="link-item-name" v-text="item.name"></span>
          <span class="link-item-desc" v-text="item.description"></span>
        </a>
      </div>
    </div>
    <Button class="link-apply" 
      type="warning" 
      ghost @click="applyLink()"
      style="float: right;"
    >友链申请</Button>
  </div>
</template>

<script>
export default {
  name: 'LinkBox',
  props: {
    allowedLinkList: []
  },
  methods: {
    applyLink() {
      this.$emit('applyLink')
    }
  }
}
</script>

<style lang="scss" scoped>
.links {
  padding-bottom: 5rem;
}
.link-list {
  width: 100%;
  overflow: auto;
  text-align: center;
  &>.link-list-item {
    position: relative;
    float: left;
    overflow: hidden !important;
    margin: 5px;
    width: calc(50% - 10px);
    height: 90px;
    border-radius: 8px;
    line-height: 17px;
    transition: all 0.5s ease;
    //box-shadow: 2px 2px 5px rgb(212, 212, 212);
    a {
      color: #666666;
      text-decoration: none;
      &:hover {
        color: #666666 !important;
        text-decoration: none;
      }
      img {
        float: left;
        margin: 12px 10px;
        width: 66px;
        height: 66px;
        border-radius: 35px;
        transition: all 0.5s;
        &:hover {
          transform: rotate(360deg);
        }
      }
      .link-item-name {
        display: block;
        padding: 20px 15px 0 0;
        height: 40px;
        font-weight: 700;
        font-size: 20px;
        overflow: hidden;
      }
      .link-item-desc {
        display: block;
        padding: 5px 15px;
        height: 50px;
        font-size: 13px;
        overflow: hidden;
      }
    }
    &:hover {
      background: rgba(40, 207, 207, 0.15);
    }
  }
}

@media screen and (max-width: 990px) {
  .link-list>.link-list-item {
    width: calc(100%/3 - 10px) !important;
  }
}
@media screen and (max-width: 850px) {
  .link-list>.link-list-item {
    width: calc(50% - 10px) !important;
  }
}
@media screen and (max-width: 630px) {
  .link-list>.link-list-item {
    width: calc(100% - 15px) !important;
  }
}
</style>